<template>
	<view class="show-box">

		<view class="flex justify-end">
			<image class="top-img" src="../../static/images/loginTop.png" mode=""></image>
		</view>

		<view class="flex justify-center" style="margin-top: 0rpx;">
			<image class="logo-img" src="https://d-youpin.bigchun.com/assets/image/logo.png" mode=""></image>
		</view>
		<view class="login-box">
			<view class="mb-4">
				<view class="login-ipt">
					<u--input v-model="mobile" placeholder="请输入手机号码" @focus="focus" @blur="blur"
						prefixIcon="/static/images/phone.png" prefixIconStyle="font-size: 22px;color: #909399">
					</u--input>
				</view>
			</view>
			<view class="mb-4">
				<view class="login-ipt flex align-center justify-between">
					<u--input placeholder="请输入验证码" v-model="captcha" @focus="focus" @blur="blur"
						prefixIcon="/static/images/password.png" prefixIconStyle="font-size: 22px;color: #909399">
					</u--input>
					<view class="send-code">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" changeText="倒计时x秒"
							@change="codeChange"></u-code>
						<button class="send-code" @tap="getCode">{{tips}}</button>
					</view>
				</view>
			</view>
			<view class="mb-4">
				<view class="login-ipt">
					<u--input placeholder="请输入邀请码" v-model="parent_id" @focus="focus" @blur="blur"
						prefixIcon="/static/images/yaoqing.png" prefixIconStyle="font-size: 22px;color: #909399">
					</u--input>
				</view>
			</view>
			<view class="my-3 flex align-center" style="flex-direction: column!important">
				<view class="login" @click="mobilelogin">{{loginType==null?'登录':'绑定手机号'}}</view>
				<view class="nologin" @click="nologin" v-if="loginType==null">暂不登录</view>
			</view>
			<view class="my-4" v-if="loginType==null">
				<label class="radio flex align-center">
					<radio-group @change="tyXieyi">
						<radio class="mr-1" style="transform:scale(0.6)" color="#05c160" value="1" />
					</radio-group>
					<view>点击登录即表示接受 <text style="color: #05c160;">《网站服务协议》</text></view>
				</label>
			</view>
			<view class="my-2" v-if="loginType==null">
				<label class="radio flex align-center justify-center">
					<view
						style="height: 27rpx;font-size: 28rpx;font-family: PingFang SC;font-weight: 400;color: #ABABAB;line-height: 69rpx;">
						其他登录方式</view>
				</label>
			</view>
			<view class="my-4 " v-if="loginType==null">
				<label class="radio flex align-center justify-center" style="flex-direction: column!important"
					@click="toWeChat">
					<image class="wechat-icon" src="../../static/images/weChart.png"></image>
					<view class="my-1"
						style="height: 23rpx;font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #4C4C4C;line-height: 69rpx;">
						微信</view>
				</label>
			</view>

		</view>
		<view v-if="!onFocus.show" class="flex justify-end" style="position: sticky; top: 100vh;">
			<image class="bottom-img" src="../../static/images/loginBottom.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		wechatAuth
	} from '../../api/public.js'
	import {
		mobilelogin,
		smsSend
	} from '../../api/home.js'
	import {
		bindingphone,
		postLogin
	} from '../../api/user.js'
	export default {
		data() {
			return {
				mobile: "",
				captcha: "",
				parent_id: "",
				verificatMsg: "获取验证码",
				seconds: 60,
				tips: '',
				onFocus: {
					show: false
				},
				loginType: null,
				xieyi: null,
				code:""
			}
		},
		onLoad(e) {
			var that=this;
			this.loginType = e.type;
			uni.login({ 
				provider: 'weixin',
				success: function(loginRes) {
					console.log("loginRes", loginRes.code);
					that.code=loginRes.code
				}
			});
		},
		methods: {
			tyXieyi(value) {
				this.xieyi = "true";
				console.log(this.xieyi);
			},
			focus() {
				console.log("focus");
				this.$set(this.onFocus, 'show', true)
			},
			blur() {
				console.log("blur");
				this.$set(this.onFocus, 'show', false)
			},
			// 微信授权登录
			async toWeChat() {
				var that=this;
				uni.getUserProfile({
					desc: "设置您的默认头像和昵称",
					success: function(info) {
						// 获取用户信息成功, info.authResult保存用户信息
						console.log("getUserProfile", info);
						let data = {
							code: that.code,
							nickname: info.userInfo.nickName,
							avatar: info.userInfo.avatarUrl,
							sex: info.userInfo.gender,
						}
						console.log("wechatAuth", data);
						postLogin(data).then(res => {
							console.log(res.data)
							if (res.data.code == 1) {
								uni.setStorageSync('userInfo', res.data.data);
								uni.setStorageSync('uid', res.data.data.id);
								uni.setStorageSync('token', res.data.data.token);
								uni.switchTab({
									url: "/pages/home/index"
								})
							} else if (res.data.code == 101) {
								uni.setStorageSync('userInfo', res.data.data);
								uni.setStorageSync('uid', res.data.data.id);
								uni.setStorageSync('token', res.data.data.token);
								uni.showModal({
									title: '提示',
									content: '请绑定手机号',
									confirmText: "去绑定",
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages/user/login?type=' +
													uni
													.getStorageSync(
														"uid")
											})
										} else if (res.cancel) {
											uni.switchTab({
												url: "/pages/home/index"
											})
										}
									}
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						})
					},
					fail: function(err) {
						console.log("toWeChat", err);
						// 登录授权失败  
						// err.code是错误码
					}
				})

				// console.log("toWeChat");
				// console.log(uni.getUserProfile);
				// uni.login({
				// 	provider: 'weixin',
				// 	success: function(loginRes) {
				// 		console.log("loginRes", loginRes);
				// 		// 登录成功
					
				// 	},
				// 	fail: function(err) {
				// 		console.log("toWeChat", err);
				// 		// 登录授权失败  
				// 		// err.code是错误码
				// 	}
				// });
			},

			mobilelogin() {
				if (this.mobile == null || this.mobile == "") {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return
				}
				if (this.captcha == null || this.captcha == "") {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}

				if (this.loginType == null) {
					if (this.xieyi == null || this.xieyi == "") {
						uni.showToast({
							title: "请勾选协议",
							icon: "none"
						})
						return
					}
					var data = {
						mobile: this.mobile,
						captcha: this.captcha,
						parent_id: this.parent_id
					}
					uni.showLoading({
						title: ''
					});
					mobilelogin(data).then(res => {
						console.log("mobilelogin", res);
						uni.hideLoading();
						if (res.data.code == 1) {
							uni.setStorageSync('userInfo', res.data.data.userinfo);
							uni.setStorageSync('uid', res.data.data.userinfo.id);
							uni.setStorageSync('token', res.data.data.userinfo.token);
							uni.switchTab({
								url: "/pages/home/index"
							})
							// var url = window.location.href;
							// let index = url.lastIndexOf("#")
							// url = url.substring(0, index) + "#/";
							// console.log("mobilelogin", url);
							// location.href = url;
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "error"
							})
						}
					})
				} else {
					uni.showLoading({
						title: ''
					});
					var data = {
						phone: this.mobile,
						captcha: this.captcha,
						parent_id: this.parent_id,
						id: this.loginType
					}
					bindingphone(data).then(res => {
						console.log("bindingphone", res);
						uni.hideLoading();
						if (res.data.code == 1) {
							uni.showToast({
								title: "绑定成功",
								icon: "none"
							})
							uni.setStorageSync('userInfo', res.data.data);
							uni.setStorageSync('uid', res.data.data.id);
							uni.setStorageSync('token', res.data.data.token);
							uni.switchTab({
								url: "/pages/home/index"
							})
							// var url = window.location.href;
							// let index = url.lastIndexOf("#")
							// url = url.substring(0, index) + "#/";
							// console.log("mobilelogin", url);
							// location.href = url;
							// if(url.indexOf("http")==-1){
							// 	location.href = "https://"+url+"/h5/#/";
							// }else{
							// 	location.href = url;
							// }
						} else {
							uni.showToast({
								title: "绑定失败",
								icon: "error"
							})
						}
					})
				}

			},
			nologin() {
				// var url = window.location.href;
				// let index = url.lastIndexOf("#") 
				// url = url.substring(0, index) + "#/";
				// console.log("mobilelogin", url);
				// location.href = url;
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					if (this.mobile == null || this.mobile == "") {
						uni.showToast({
							title: "请输入手机号",
							icon: "none"
						})
						return
					}
					var data = {
						mobile: this.mobile,
						event: "mobilelogin"
					}
					smsSend(data).then(res => {
						console.log("mobilelogin", res);
						if (res.data.code == 1) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast(res.data.msg);
							uni.hideLoading();
						}
					})

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.login-ipt {
		background-color: transparent !important;
		border: transparent;
		border-bottom: 1px solid #DCDCDC;
		border-radius: 0px !important;
	}

	.u-input {
		padding: 0px !important;
		border: transparent !important;

	}

	.show-box,
	.login-bg {
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: white;
	}

	.zxc-img {
		width: 300rpx;
		height: 210rpx;
	}

	.top-img {
		width: 290rpx;
		height: 168rpx;
	}

	.bottom-img {
		width: 613rpx;
		height: 115rpx;
	}

	.logo-img {
		width: 173rpx;
		height: 173rpx;
	}

	.wechat-icon {
		width: 86rpx;
		height: 84rpx;
	}

	.login-box {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 60rpx 110rpx;
		/* padding: 105rpx 60rpx; */
		position: relative;
		z-index: 999;
	}

	.login-title image {
		width: 27rpx;
		height: 27rpx;
	}

	.login-title {
		font-size: 22rpx;
		color: #969696;
		padding-left: 36rpx;
	}

	.login-ipt {
		width: 100%;
		height: 65rpx;
		background-color: #f0f3f8;
		border-radius: 8rpx;
	}

	.login-ipt input {
		width: 100%;
		height: 100%;
		padding-left: 36rpx;
		font-size: 26rpx;
	}

	.send-code {
		width: 160rpx;
		height: 40rpx;
		background: #05BD03;
		border-radius: 6rpx;
		text-align: center;
		color: white;
		font-size: 20rpx;
		line-height: 40rpx;
	}

	.radio {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #080808;
		line-height: 69rpx;
	}

	.btn-login {
		width: 100%;
		height: 65rpx;
		background-color: #49c265;
		color: #FFFFFF;
		text-align: center;
		line-height: 65rpx;
		font-size: 26rpx;
		border-radius: 6rpx;
	}

	.login {
		width: 568rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		border-radius: 44rpx;


		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.nologin {
		margin-top: 34rpx;
		width: 568rpx;
		height: 88rpx;
		border: 2px solid #05BD03;
		border-radius: 44rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #000000;
		line-height: 88rpx;
	}
</style>
